<template>
  <div
    class="classified-navigation"
    :class="[

    ]"
    @mouseleave="changeBarShow = 0"
    >
    <div class="title-bar">
      <div class="title">{{ title }}</div>
      <router-link
        v-if="learnMore"
        class="learn-more"
        :to="{ path: learnMore.path || '#'}">
        {{ learnMore.title || '' }}
      </router-link>
    </div>
    <div class="menu-list">
      <div
        class="menu-item"
        :class="menuItemActive === index+1 ? 'active' : ''"
        v-for="(menus, index) in menuList"
        :key="index"
        @mouseover="menuItemActive = index+1">
        <template v-for="(menu, index) in menus.menus || []">
          <router-link class="menu-item-item"  :key="menu.title" :to="{path: menu.path}">
            {{ menu.title }}
          </router-link>
          <span class="line" :key="index" v-if="menus.menus.length !== index+1">/</span>
        </template>
        <div class="learn-more">></div>
      </div>
    </div>
    <div v-show="changeBarShow" class="change-bar">
      <div class="change-bar-content">
        <div class="menu-item-group" v-for="(item, index) in checkChildrenData(menuList[menuItemActiveIndex])" :key="index">
          <span class="arrow iconfont icon-icon224"></span>
          <router-link class="title" :to="{path: item.path}">{{ item.title }}</router-link>
          <div class="menu-list">
            <router-link class="menu-item" v-for="item in item.menus" :key="item.title" :to="{path: item.path}">
              {{ item.title }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'classifiedNavigation',
  props: {
    title: String,
    learnMore: Object,
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      menuItemActive: 0
    }
  },
  methods: {
    checkChildrenData (data) {
      if (data && data.children) {
        return data.children
      } else {
        return []
      }
    }
  },
  computed: {
    changeBarShow: {
      get () {
        return this.menuItemActive
      },
      set (b) {
        this.menuItemActive = b
      }
    },
    menuItemActiveIndex () {
      return this.menuItemActive > 0 ? this.menuItemActive - 1 : 0
    }
  }
}
</script>

<style lang="scss" scoped>
  .classified-navigation {
    position: relative;
    width: 100%;
    .title-bar {
      display: flex;
      padding: 0 15px;
      line-height: 36px;
      background: #8C222C;
      color: #FFFFFF;
      .title {
        font-weight: 700;
        flex: 1;
      }
      .learn-more {
        color: #EEEEEE;
        font-size: 12px;
        text-decoration: none;
        &:hover {
          color: #FFFFFF;
          text-decoration: underline;
        }
      }
    }
    > .menu-list {
      .menu-item + .menu-item {
        border-top: none;
      }
      .menu-item {
        position: relative;
        line-height: 30px;
        padding: 0 10px;
        cursor: pointer;
        border: 2px solid #E5E5E5;
        background: #FFFFFF;
        &.active {
          border-color: #8C222C;
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: calc(100% - 2px);
            top: 0;
            left: 0;
            border-top: 2px solid #8C222C;
            border-right: 2px solid #FFFFFF;
            background: transparent;
            z-index: 20;
          }
        }
        .learn-more {
          position: absolute;
          font-family: 'Courier New', Courier, monospace;
          color: #3F3F3F;
          font-size: 12px;
          top: 0;
          right: 10px;
        }
        .menu-item-item {
          color: #3F3F3F;
          font-size: 14px;
          text-decoration: none;
          &:hover {
            color: #8C222C;
            text-decoration: underline;
          }
        }
        .line {
          font-size: 12px;
          line-height: 30px;
        }
      }
    }
    .change-bar {
      position: absolute;
      top: 0;
      z-index: 10;
      left: calc(100% - 2px);
      width: 800px;
      height: calc(100% - 4px);
      border: 2px solid #8C222C;
      // border-left: none;
      background: #FFFFFF;
      .change-bar-content {
        margin: 15px;
        color: #000000;
        a {
          color: inherit;
          text-decoration: none;
        }
        > div.arrow {
          &::befoer {
            top: -3px;
          }
        }
        .title {
          font-weight: 700;
          line-height: 40px;
          font-size: 20px;
          padding-left: 10px;
          &:hover {
            color: #8C222C;
          }
        }
        .menu-item-group + .menu-item-group {
          margin-top: 0px;
        }
        .menu-list {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .menu-item {
            position: relative;
            font-size: 12px;
            margin: 5px 5px;
            padding-left: 1em;
            &:hover {
              color: #8C222C;
            }
            &::before {
              position: absolute;
              content: "|";
              right: -12px;
              color: #000000;
              cursor: default;
            }
          }
        }
      }
    }
  }
</style>
